<template>
  <div class="color-converter">
    <div class="input-group">
      <span class="label">HEX</span>
      <el-input 
        v-model="hex" 
        placeholder="#RRGGBB" 
        @input="handleHexInput"
        class="input"
      />
    </div>
    
    <div class="input-group">
      <span class="label">RGB</span>
      <div class="rgb-inputs">
        <el-input 
          v-model.number="r" 
          type="number" 
          min="0" 
          max="255" 
          @input="handleRgbInput"
          class="rgb-input"
        />
        <el-input 
          v-model.number="g" 
          type="number" 
          min="0" 
          max="255" 
          @input="handleRgbInput"
          class="rgb-input"
        />
        <el-input 
          v-model.number="b" 
          type="number" 
          min="0" 
          max="255" 
          @input="handleRgbInput"
          class="rgb-input"
        />
      </div>
    </div>
    
    <div class="input-group">
      <span class="label">Color Picker</span>
      <el-color-picker style="width: 100px;" size="large" v-model="hex" @change="handleColorPickerChange" />
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { debounce } from 'lodash';

const hex = ref('')
const r = ref(0)
const g = ref(0)
const b = ref(0)
let isUpdating = false

// HEX转RGB处理函数
const hexToRgb = (hex) => {
  let sanitizedHex = hex.replace(/^#/, '')
  if (sanitizedHex.length === 3) {
    sanitizedHex = sanitizedHex.split('').map(c => c + c).join('')
  }
  if (sanitizedHex.length !== 6) return null
  const bigint = parseInt(sanitizedHex, 16)
  if (isNaN(bigint)) return null
  return {
    r: (bigint >> 16) & 255,
    g: (bigint >> 8) & 255,
    b: bigint & 255
  }
}

// RGB转HEX处理函数
const rgbToHex = (r, g, b) => {
  const clamp = (value) => Math.min(255, Math.max(0, value))
  const toHex = (n) => {
    const hex = clamp(n).toString(16)
    return hex.length === 1 ? '0' + hex : hex
  }
  return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase()
}

// 监听HEX变化
watch(hex, debounce((newVal) => {
  if (isUpdating) return
  isUpdating = true
  const rgb = hexToRgb(newVal)
  if (rgb) {
    r.value = rgb.r
    g.value = rgb.g
    b.value = rgb.b
  }
  if (newVal && !newVal.startsWith('#')) {
    hex.value = '#' + newVal
  }
  isUpdating = false
}, 500))

// 监听RGB变化
watch([r, g, b], () => {
  if (isUpdating) return
  isUpdating = true
  if ([r.value, g.value, b.value].every(v => v >= 0 && v <= 255)) {
    hex.value = rgbToHex(r.value, g.value, b.value)
  }
  isUpdating = false
})

// 处理HEX输入时的即时反馈
const handleHexInput = (value) => {
  if (!value) {
    r.value = 0
    g.value = 0
    b.value = 0
  }
}

// 处理RGB输入时的即时反馈
const handleRgbInput = () => {
  if (r.value < 0) r.value = 0
  if (g.value < 0) g.value = 0
  if (b.value < 0) b.value = 0
  if (r.value > 255) r.value = 255
  if (g.value > 255) g.value = 255
  if (b.value > 255) b.value = 255
}

// 处理取色器变化时的即时反馈
const handleColorPickerChange = (value) => {
  hex.value = value.toUpperCase();
}
</script>

<style scoped>
.color-converter {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  background: #f5f5f5;
  border-radius: 8px;
}

.input-group {
  margin-bottom: 15px;
}

.label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: #666;
}

.rgb-inputs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.input {
  width: 100%;
}

.rgb-input {
  width: 100%;
}

.el-input {
  font-family: monospace;
}
::v-deep .el-color-picker__trigger{
  width: 100% !important;
}
</style>